<template>
	<view class="bg-white w100 over-hidden" style="box-shadow: 0px 0px 13px 0px rgba(18, 0, 98, 0.2);border-radius: 20rpx 20rpx 0 0;">
		<view class="ptb-10 center bb gray-2" @click="up=!up">
			<u-icon :name="up?'arrow-down':'arrow-up'"></u-icon>
		</view>
		<view v-show="up">
			<!-- 标题 -->
			<view class="flex">
				<view class="flex_l">
					<view class="size-32 bg-blue white ptb-18 plr-30">代驾 - {{info.type==1?'即时单':'预约单'}}</view>
					<view class="ml-20" v-if="info.type==1">立即出发</view>
					<view class="ml-20 size-28" v-if="info.type==2">{{ info.appointment_time | formatDate }} 出发</view>
				</view>
				<view v-if="price" class="red bold mr-30">￥{{price}}</view>
				<view v-else class="red bold mr-30">预估:￥{{info.estimated_price}}</view>
			</view>
			<!-- 起始点 -->
			<view class="ptb-35 pl-40 pr-28">
				<view class="flex flex-top">
					<view class="flex_l u-flex-1 over-hidden">
						<view class="flex flex-column">
							<view class="bg-purple radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
							<view class="size-28 mt-15">起点</view>
						</view>
						<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
							<view class="bold">{{info.start}}</view>
							<view class="u-line-1 size-28 mt-10">{{info.start_address}}</view>
						</view>
					</view>
					<!-- <view>【距您1.5km】</view> -->
				</view>

				<view class="w100 flex_r" style="height: 46rpx;" @click="call(info.mobile)">
					<view class="mr-10">尾号{{info.mobile?info.mobile.slice(-4):''}}</view>
					<u-icon name="phone-fill" color="#EA0000" size="30"></u-icon>
				</view>

				<view class="flex flex-bottom">
					<view class="flex_l u-flex-1 over-hidden">
						<view class="flex flex-column">
							<view class="bg-red radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
							<view class="size-28 mt-15">终点</view>
						</view>
						<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
							<view class="bold">{{info.end}}</view>
							<view class="u-line-1 size-28 mt-10">{{info.end_address}}</view>
						</view>
					</view>
					<view class="ml-15 mr-12"> 全程{{(info.distance/1000).toFixed(1)}}km </view>
				</view>
			</view>

		</view>
		<!-- 按钮 -->
		<!-- status -1=已取消,0=呼叫中,1=已接单,2=进行中,3=待支付,
		4=司机已到达,5=预约单待司机出发,99=已完成' -->
		<view class="flex size-32 bold white w100" style="height: 96rpx;">
			<view v-if="info.status==3||info.status==4" class="bg-gray-2 center h100" style="width: 170rpx;" @click="call(info.status)">{{info.status==3?'线下结算':'打电话'}}</view>
			<view v-if="info.status==-1" class="u-flex-1 bg-blue center h100" @click="toIndex">用户已取消，重新接单</view>
			<view v-if="info.status==0" class="u-flex-1 bg-blue center h100" @click="takeOrder">立即抢单</view>
			<!-- 预约单 -->
			<view v-if="info.status==5" class="u-flex-1 bg-blue center h100" @click="startGo">开始出发</view>
			<view v-if="info.status==1" class="u-flex-1 bg-blue center h100" @click="onOrigin">确认我已到达</view>
			<view v-if="info.status==4" class="u-flex-1 bg-blue center h100" @click="toDestination">确认开始行程</view>
			<view v-if="info.status==2" class="u-flex-1 bg-blue center h100" @click="toPay">确认订单给顾客结算</view>
			<view v-if="info.status==3" class="u-flex-1 bg-blue center h100" @click="toIndex">继续接单</view>
			<view v-if="info.status==99" class="u-flex-1 bg-blue center h100" @click="toIndex">订单已完成,继续接单</view>
		</view>

		<!-- <u-modal v-model="show" :show-cancel-button="true"  @confirm="confirm" :title="'行程共计'+price+'元'" content="请确认收到付款后进行此操作,否则造成损失平台概不负责"></u-modal> -->
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object
			},
			price: {
				type: String // 实时价格
			}
		},
		data() {
			return {
				up: true,
				show: false,
			};
		},

		methods: {
			call(type) {
				if (type == 3) {
					//线下结算
					// this.show = true
					uni.navigateTo({
						url: '/pages/home/offline?price=' + this.price + '&id=' + this.info.id
					})
				} else {
					//打电话
					uni.makePhoneCall({
						phoneNumber: this.info.mobile //仅为示例
					});
				}
			},
			toIndex() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 抢单
			takeOrder() {
				this.$http('/addons/ddrive/order/taking', {
					order_id: this.info.id
				}, "POST").then(() => {
					uni.showToast({
						title: '抢单成功'
					})
					this.$emit('update')
				})
			},
			// 预约单开始出发
			startGo() {
				this.$http('/addons/ddrive/order/set_out', {
					order_id: this.info.id
				}, "POST").then(() => {
					this.$emit('update')
				})
			},
			// 到达起点
			onOrigin() {
				this.$http('/addons/ddrive/order/reach', {
					order_id: this.info.id
				}, "POST").then(() => {
					this.$emit('update')
				})
			},
			// 开始行程
			toDestination() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						_this.$http('/addons/ddrive/order/start', {
							order_id: _this.info.id,
							latitude: res.latitude,
							longitude: res.longitude
						}, "POST").then((data) => {
							if (uni.getSystemInfoSync().platform == 'android') {
								plus.runtime.openURL("androidamap://navi?sourceApplication=ddcar&lat=" + _this.info.end_latitude + "&lon=" +_this.info.end_longitude + "&dev=0&style=2")
							} else {
								plus.runtime.openURL("iosamap://navi?sourceApplication=ddcar&lat=" + _this.info.end_latitude + "&lon=" +_this.info.end_longitude + "&dev=0&style=2")
							}
							_this.$emit('update')
						})
					}
				});
			},
			// 确认订单
			toPay() {
				this.$http('/addons/ddrive/order/done', {
					order_id: this.info.id
				}, "POST").then(() => {
					this.$emit('update')
				})
			},
		}

	}
</script>

<style lang="scss">

</style>
